<template>
  <div class="panel-title">
    <div class="panel-title-left">
      <div class="panel-title-text">{{ title }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  title: String,
})
</script>
<style scoped lang="scss">
.panel-title {
  height: 30px;
  width: 100%;
  background: url("@/assets/leftImage/title-bar.png") no-repeat center center;  
  background-size: cover; /* 关键属性：完全覆盖容器 */
  // background-size: 100% 100%;
  .panel-title-left {
    margin-left: 42px;
    .panel-title-text {
      // font-family: DingTalk JinBuTi;
      font-family: "钉钉进步体 Regular";
      font-size: 24px;
      line-height: 24px;
      font-weight: 600;
      letter-spacing: 0.1em;
      background: linear-gradient(0deg, #effcfe 41%, #96deff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent; /* 所有浏览器支持 */
      text-shadow: 0px 0px 4px rgba(5, 28, 55, 0.4);
    }
  }
}
</style>
